<%@page import="es.abredatos.energyes.Energy"%>
<%@page import="es.abredatos.energyes.Region"%>
<!doctype html>
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>EnergyES | Conoce la composición energética en España</title>
  <meta name="description" content="">
  <meta name="author" content="">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="images/favicon.ico">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/base/jquery-ui.css" type="text/css" media="all" />
  <link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />

  <link rel="stylesheet" href="${resource(dir:'css', file:'style.css?v=2')}"/>
  		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  		<script src="${resource(dir:'js/libs', file:'modernizr-1.7.min.js')}"></script>
		<script type="text/javascript" src="${resource(dir:'js', file:'jquery-1.5.1.min.js')}"></script>
		<script type="text/javascript" src="${resource(dir:'js', file:'jquery-ui-1.8.12.custom.min.js')}"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("#slider").slider({
					range: true,
					min: 0,
					max: 1000,
					values: [ 50, 500 ]
				});
			});
		</script>

        <jqplot:resources/>
        <jqplot:plugin name="categoryAxisRenderer"/>
        <jqplot:plugin name="dateAxisRenderer"/>
        <jqplot:plugin name="cursor"/>
        <jqplot:plugin name="highlighter"/>
        <jqplot:plugin name="canvasAxisTickRenderer"/>
        <jqplot:plugin name="canvasTextRenderer"/>
        
        <g:javascript src="chart/timeline.js"/>
        <g:javascript src="uuid.js"/>

</head>

<body>

  <div id="container">

	<section id="box1">
		<aside>
			<a href="#" id="logo">EnergyES</a>
			<div id="claim">
				<span class="top"></span>
				<h1>Conoce la composición energética en España...</h1>
			</div>
			<div id="like">
				<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.dominioreal.es%2F&amp;send=false&amp;layout=box_count&amp;width=100&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:90px;" allowTransparency="true"></iframe>
			</div><!--//I LIKE BUTTON (Ojo que falta el dominio real -->
		</aside>
		<figure id="googlemaps">
			<g:include controller="chart" action="map" />
		</figure>
		<a href="#box2" class="big-button">Quiero saber más</a>
	</section><!--//SECTION BOX1 -->

	<section id="box2">
	
		<aside>
			<form>
				<section id="period">
					<h3>Período</h3>
					<div class="wrapper">
						<div>
							<g:select value="${session.yearStart?:2010}" name="initYear"  from="${years}"></g:select>
							<g:select value="${session.monthStart?:0}" name="initMonth"  from="${months}" optionKey="code"></g:select>
						</div>
						<div>
							<g:select value="${session.yearEnd?:2010}" name="endYear" from="${years}"></g:select>
							<g:select value="${session.monthEnd?:11}" name="endMonth" from="${months}" optionKey="code"></g:select>
						</div>
					</div>
				</section>
				
				<section id="parameters">
					<h3>parametros</h3>
					<div class="wrapper">
						<label>Tipo de energía:</label><br />
						<select id="energy" name="energy">
							<option value="-1">TODAS</option>
							<g:each in="${energies}" var="energy">
								<option value="${energy.toString()}">${energy.toString().capitalize()}</option>
							</g:each>
	 					</select>
						
						<br />
						<label>Región:</label><br />
						<select id="region">
							<option value="-1">ESPAÑA</option>
							<g:each in="${regions}" var="reg">
								<optgroup label="${reg.name}">
									<option value="R_${ reg.id }">TODA ${reg.name}</option>
									<g:each in="${ reg.provinces }" var="prov">
										<option value="P_${ prov.id}">${prov.name}</option>
									</g:each>
								</optgroup>
							</g:each>
	 					</select><br />
	 					<g:hiddenField name="timelineUrl" value="${createLink(controller:'chart', action:'updateSerie')}" />
	 					<input type="submit" value="aceptar" class="button" onclick="return onSubmitAddButton();">				
					</div>
				</section>		
			</form>
			<section id="list">
				<ul>
				</ul>
			</section>
			<script>
				<g:each in="${session.series}" var="serie" status="i">
					addSerie('${serie.uuid}', '${serie.region?.name}', '${serie.province?.name}', '${serie.energy.toString()}');
				</g:each>
			</script>
		</aside><!--//ASIDE -->
		
		<figure id="graph">
			<g:include controller="chart" action="timeline" />
		</figure>
		
	</section><!--//SECTION BOX2 -->

    <footer>
    
		<section id="logo">
			<img src="${resource(dir:'images', file:'thumb-logo.png')}" alt="thumb-logo" width="109" height="77" />
		</section>
		
		<section id="credits">
			<div class="left">
				<img src="${resource(dir:'images', file:'logo-ministerio.gif')}" alt="Ministerio de Industria Turismo y Comercio" width="184" height="43" />
			</div>
			<div class="right">
				Fuente de datos: Web del Ministerio de Industria Turismo y Comercio <a href="http://www.mityc.es" target="_blank">mytic.es</a>
			</div>
			
			<div class="left abredatos">
				<img src="${resource(dir:'images', file:'logo-abredatos.gif')}" alt="Abredatos 2011" width="67" height="67" />
			</div>
			<div class="right">
				Powered by: LOS ABRELATAS para ABREDATOS 2011 <a href="http://www.abredatos.es" target="_blank">abredatos.es</a>
			</div>
		</section>
		
		<section id="members">
			<ul>
				<li><a href="http://twitter.com/fatimacasau" target="_blank">Fátima Casau</a></li>
				<li><a href="http://twitter.com/alvaro_sanchez" target="_blank">Álvaro Sánchez</a></li>
				<li><a href="http://twitter.com/daureos" target="_blank">Jesús Lanchas</a></li>
				<li><a href="http://www.fernandoval.es" target="_blank">Fernando Val</a></li>
			</ul>
		</section>
		
    </footer><!--//FOOTER -->




  </div><!--//CONTAINER -->



  <!-- scripts concatenated and minified via ant build script-->
  <script src="${resource(dir:'js', file:'script.js')}"></script>
  <!-- end scripts-->


  <!--[if lt IE 7 ]>
    <script src="${resource(dir:'js/libs', file:'dd_belatedpng.js')}"></script>
    <script>DD_belatedPNG.fix("img, .png_bg");</script>
  <![endif]-->


<script>
    var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"]]; // Change UA-XXXXX-X to be your site's ID 
    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
    g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
    s.parentNode.insertBefore(g,s)}(document,"script"));
</script>

</body>
</html>